<template>
  <div class="home">
    <!-- <project /> -->
    <h3 class="big-title">房开智导</h3>
    <p class="small-title bold">
      提供房地产全程运营解决方案</br>
    为各房企总经理定制管理导航</p>
    <p class="detail">
      开发商七大部门的工作导航</br>
      承包商九大专业的计划导航</br>
      确保各计划与节点合理精准</br>
    </p>
    <van-collapse v-model="activeCol">
  <van-collapse-item title="开发商索引" name="1" disabled></van-collapse-item>
  <van-collapse-item title="承建商索引" name="2" disabled></van-collapse-item>
  <van-collapse-item title="开发项目索引" name="3">
    
    <van-cell :title="item.pname" is-link v-for="item in projectList" :key="item.pid" @click="listClick(item.pid)"/>
  </van-collapse-item>
</van-collapse>

  </div>
</template>

<script>
import project from "./project/index";
import { getAllproject } from "@/request/api.js";
export default {
  name: "Home",
  components: {
    project,
  },
  data() {
    return {
      projectList: [],
      activeCol: ["3"],
      contractingList: [
        {
          pname: "开发商索引",
          pid: "11",
        },
      ],
      list: [
        {
          pname: "承建商索引",
          pid: "44",
        },
      ],
    };
  },
  mounted() {
    console.log(getAllproject);
    getAllproject().then((res) => {
      this.projectList = res;
    });
  },
  methods: {
    listClick(pid) {
      this.$router.push({ path: `/project/${pid}` });
    },
  },
};
</script>
<style lang="scss">
.home {
  .big-title {
    font-size: 26px;
  }
  .van-cell {
    background-color: #78e8e3;
    // margin-bottom: 5px;
  }
  .small-title {
    text-align: center;
  }
  .bold {
    font-weight: 700;
  }
  .block {
    margin-bottom: 10px;
  }
  .van-collapse-item {
    >.van-collapse-item__title {
      background: #cbdff3;
    }
    >.van-collapse-item__title--disabled{
      color: #828aa2;
    }
  }
}
</style>
